{extend name="index/index"/}
{block name="daohang"}
{/block}

{block name="lunbo"}
<div class="container-fluid">
    <form action="{:url('index/order/save',['id'=>$house_detail['id']])}" onsubmit="return checkForm()" name="regForm" method="post">

    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-5">
            <span style="float:right;"><h4><a href="/">首页</a></h4></span>
            <div class="m-columns-hd new-columns-hd">
                <h3><span class="label label-warning">预订信息</span></h3>
                <hr>
            </div>
        </div>

    </div>
        <div class="row">
       <div class="col-md-1"></div>
       <div class="col-md-5">
       <div class="m-form-cont booking-info">
           <div class="control-group">
               <label for="" class="control-lab">入离日期：</label>
               <div class="controls">
                   <span><input class="ipt-primary ipt-date" id="startDate" name="input_date" type="text" value="{$input.input_date}" /></span>
                   &nbsp;
                   <span class="label-text">至</span>
                   &nbsp;
                   <span><input class="ipt-primary ipt-date" id="endDate" name="out_date" type="text" value="{$input.out_date}" /></span>

                   <span class="total-box">共1晚</span>


               </div>
           </div>

           <div class="control-group">
               <label for="" class="control-lab">预订数量：</label>
               <div class="controls">
                   <select class="dn" id="selBookingCount" name="order_num"><option selected="selected" value="1">1套</option>
                       <option value="2">2套</option>
                       <option value="3">3套</option>
                   </select>
               </div>
           </div>
           <div class="control-group">
               <label for="" class="control-lab"><b>*</b>入住人数：</label>
               <div class="controls">
                   <div class="spinner-box">

                       <select class="oselectInput" id="PeopleCount1" name="total_num"><option selected="selected" value="1">1</option>
                           <option value="2">2</option>
                       </select>
                   </div>
               </div>

           </div>

                   <div class="m-columns-hd new-columns-hd">
                       <h3><span class="label label-success">入住人信息</span></h3>
                   </div>
                   <hr>


                   <div class="address-card">

                       <p><span>入住人姓名:</span><input type="text" onblur="checkUser()" name='input_person_name' placeholder='Please enter username'></p>
                       <span id="utab"></span>
                       <p><span>入住人电话:</span><input type="text" onblur="checkPhone()" maxlength=11 name='order_phone' placeholder='Please enter telephone'></p>
                       <sapn id="ptab"></sapn>
                       <p><span>入住人邮箱:</span><input type="text" onblur="checkEmail()" name='order_email' placeholder='Please enter address'></p>
                       <sapn id="etab"></sapn>
                       <i class="duigon-icon"></i>
                   </div>
       </div>
   </div>
            <div class="col-md-1"></div>
       <div class="col-md-5">
           <div class="picture-box">
               <span class="personal-tag landlord-tag">房东经营</span><br>
               <a href="https://www.tujia.com/unitdetail/index/112962?scenicspotpinyin=pingyaoxian&amp;destinationpinyin=pingyao" target="_blank" rel="nofollow">
                   <img src="/uploads/housepic/{:str_replace('\','/',$house_detail['house_pic'])}" width="300" height="200" title="平遥古巷雅苑四合院豪华土炕房" alt="平遥古巷雅苑四合院豪华土炕房" />
               </a>
           </div>
           <div class="side-hd">
               <h4><a href="https://www.tujia.com/unitdetail/index/112962?scenicspotpinyin=pingyaoxian&amp;destinationpinyin=pingyao" target="_blank" onclick="_gaq.push(['_trackEvent', 'pcOrderInfo', '预订房屋点击']);">{$house_detail.house_name}</a></h4>
           </div><p></p>
           <br>
           <div class="m-order-list price-list">
           <ul>
               <li><span class="label-text">房费</span><span class="price-info total-price"><dfn>¥</dfn>{$house_detail.houseprice}</span></li>

           </ul>

            </div>
            <br>

       </div>
   </div>


        <div class="row">
            <div class="col-md-1"></div>
            <div class="col-md-5">
                <div class="m-columns-hd new-columns-hd">
                    <h3><span class="label label-success">支付方式</span></h3>
                </div>
                <hr>
            </div>
        </div>
        <div class="row">
            <div class="col-md-1"></div>
            <div class="col-md-6">

                <label class="radio-inline">
                    <input type="radio" name="order_payment" id="inlineRadio1" value="1"> 在线支付
                </label>
                <label class="radio-inline">
                    <input type="radio" name="order_payment" id="inlineRadio2" value="2"> 人到付款
                </label>

            </div>

        </div>
        <div class="row">
            <div class="col-md-7"></div>
            <div class="col-md-4">
                <button type="submit" class="btn btn-primary btn-lg">提交订单</button>
            </div>
        </div>
    </form>
</div>



<!--js实现用户注册各种验证-->
<script>
    function checkEmail(){
        var email = document.regForm.order_email.value;
        var etab =document.getElementById('etab');
        if (email.match(/^[\w-]+@[\w-]+(\.\w+){1,3}$/) == null){
            etab.innerHTML = '请输入正确的邮箱';
            etab.style.color ='#f00';
            return false;
        }else{
            etab.innerHTML = '正确';
            etab.style.color ='#0a0';
            return true;
        }
    }

    function checkUser(){
        var user = document.regForm.input_person_name.value;
        var utab =document.getElementById('utab');
        if (user.match(/^[\u0391-\uFFE5]+$/) == null){
            utab.innerHTML = '请输入正确的用户名';
            utab.style.color ='#f00';
            return false;
        }else{
            utab.innerHTML = '正确';
            utab.style.color ='#0a0';
            return true;
        }
    }
    function checkPhone(){
        var phone = document.regForm.order_phone.value;
        var ptab =document.getElementById('ptab');
        if (phone.match(/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/) == null){
            ptab.innerHTML = '请输入正确的手机号';
            ptab.style.color ='#f00';
            return false;
        }else{
            ptab.innerHTML = '正确';
            ptab.style.color ='#0a0';
            return true;
        }
    }



    function checkForm(){
        return checkEmail() && checkUser() && checkPhone();
    }
</script>
{/block}
{block name="foot"}
<link rel="stylesheet" href="/static/Mobile/css/amazeui.min.css">
<link rel="stylesheet" href="/static/Mobile/css/wap.css">
<div class="pet_article_dowload pet_dowload_more_top_off">
    <div class="pet_article_dowload_title">友情链接</div>
    <div class="pet_article_dowload_content pet_dowload_more_top_bg">
        <div class="pet_article_dowload_triangle pet_dowload_more_top_san"></div>
        <div class="pet_article_dowload_content_font" style="margin-left: 5px;">
            {volist name="data" id="v"}
            <span><a href="{$v['url']}">{$v['webname']} |</a></span>
            {/volist}
        </div>
    </div>
    <div class="pet_article_footer_info">Copyright(c)2017 www.zhoumuhao.com 乐途欢迎你！</div>
</div>
{/block}